<template>
    <div class="list">
    <el-row class="head">
        <el-col >——维修分类列表/维修分类</el-col>
    </el-row>
        <el-row class="title">
            <el-col>维修分类列表</el-col>
        </el-row>


        <el-table
                border
                :data="form"
                style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left"  label-width="200px" inline class="demo-table-expand">
                        <el-form-item label="自动完成时间（小时）：">
                            <span>{{ props.row.autoCompleteHours }}</span>
                        </el-form-item>
                        <el-form-item label="用户默认评价（星）：">
                            <span>{{ props.row.autoCompleteStars }}</span>
                        </el-form-item>
                        <el-form-item label="允许用户创建：">
                            <span>{{ props.row.allowUserCreate }}</span>
                        </el-form-item>
                        <el-form-item label="必填报障人信息：">
                            <span>{{ props.row.needUserInfo }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                    label="分类名称"
                    prop="name"
                    width="880">
            </el-table-column>
            <el-table-column
                    label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button
                        size="mini"
                        type="primary"
                        @click="handleLocation(scope.$index, scope.row)">分配区域</el-button>
            </template>>

            </el-table-column>

        </el-table>
    </div>
</template>

<script>
    export default {
        name: "list",
        data()
        {
            return{
                form:[],
        }
        },
        created() {
            this.getTypes();
        },
        methods:{
            getTypes()
            {
                this.$axios.post("/api/v1/user/type/list").then(result => {

                    return result.data;
                })
                    .then(data1 => {
                        this.form=data1.data;
                    });
            },
            handleEdit(index,data){
                var id=data.id;
                this.$router.push({
                    path:`/columns/upd/${id}`
                })
            },
            handleLocation(index,data)
            {
                var id=data.id;
                this.$router.push({
                    path:`/columns/allocat/${id}`
                })
            }
        }
    }
</script>

<style scoped>
    .el-input{
        width: 600px;
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>